<template>
	<cl-select-table
		v-model="value"
		:title="t('选择商品信息')"
		:service="service.mall.goods"
		:columns="columns"
		:multiple="multiple"
		:dict="{ img: 'images', text: 'title' }"
		pickerType="default"
	/>
</template>

<script setup lang="ts">
defineOptions({
	name: "mall-goods-select",
});

import { useCool } from "/@/cool";
import { useI18n } from "vue-i18n";
import { CrudProps } from "/#/crud";
import { reactive, ref, useModel } from "vue";

const props = defineProps({
	...CrudProps,
	modelValue: null,
	multiple: Boolean,
});

const { service } = useCool();
const { t } = useI18n();

const value = useModel(props, "modelValue");

// 选项
const options = reactive({
	status: [
		{ label: t("下架"), value: 0, type: "danger" },
		{ label: t("上架"), value: 1, type: "success" },
	],
});

const columns = ref([
	{ label: t("分类名称"), prop: "categoryName", minWidth: 140 },
	{ label: t("标题"), prop: "title", minWidth: 140 },
	{
		label: t("主图"),
		prop: "pic",
		minWidth: 100,
		component: { name: "cl-image", props: { size: 60 } },
	},
	{
		label: t("示例图"),
		prop: "images",
		minWidth: 100,
		component: { name: "cl-image", props: { size: 60 } },
	},
	{ label: t("价格"), prop: "price", minWidth: 140, sortable: "custom" },
	{ label: t("产地"), prop: "origin", minWidth: 140 },
	{
		label: t("状态"),
		prop: "status",
		minWidth: 100,
		component: { name: "cl-switch" },
		dict: options.status,
	},
	{
		label: t("详情"),
		prop: "content",
		minWidth: 120,
		component: { name: "cl-editor-preview", props: { name: "wang" } },
	},
	{ label: t("排序值"), prop: "order", minWidth: 140, sortable: "custom" },
]);
</script>
